<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>安装向导</title>
    <link rel="stylesheet" type="text/css" href="/libs/layui/css/layui.css" />
    <style>
        body {
            margin: 15px;
        }

        .install_guide {
            margin: 0 auto;
            border: 1px solid #B5CFD9;
            width: 700px;
            height: 700px;

        }

        .guide_name {
            width: 100%;
            height: 70px;
            background-color: #F0F7FC;
            box-shadow: 0px 1px 2px rgb(141, 170, 182);
            margin-bottom: 20px;
        }

        .name_text {
            font-size: 20px;
            font-family: 'Courier New', Courier, monospace;
            padding: 20px;

        }

        .guide_content {
            width: 660px;
            height: 600px;
            margin: 0 auto;
            overflow-x: hidden;
            /* overflow-y: scroll; */
            font-family: 'Courier New', Courier, monospace;
        }

        .guide_content_header {
            text-align: center;
            font-size: 18px;
            padding-bottom: 10px;
        }



        .layui-form-label {
            float: left;
            display: block;
            padding: 9px 10px;
            width: 85px;
            font-weight: 400;
            line-height: 20px;
            text-align: right;

        }
    </style>
</head>

<body>
    <div class="install_guide">
        <div class="guide_name">
            <p class="name_text">考勤管理系统 | 安装指导</p>
        </div>
        <div class="guide_content">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>数据库信息填写</legend>
            </fieldset>
            <form class="layui-form">
                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">mac地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="mac" lay-verify="mac" autocomplete="off" value="866" disabled class="layui-input">
                    </div>
                </div> -->
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库服务器</label>
                    <div class="layui-input-block">
                        <input type="text" name="sqlAddress" lay-verify="sqlAddress" autocomplete="off" placeholder="数据库服务器地址, 一般为 localhost" 
                            class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">数据库名</label>
                    <div class="layui-input-block">
                        <input type="text" name="sqlName" lay-verify="sqlName" autocomplete="off" placeholder="数据库名" disabled value="attendance"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="sqlUser" lay-verify="sqlUser" autocomplete="off" placeholder="数据库用户名"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="sqlPwd" lay-verify="sqlPwd" autocomplete="off" placeholder="数据库密码"  class="layui-input">
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>填写公司信息</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 公司名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="companyName" lay-verify="companyName" autocomplete="off" placeholder="公司名称"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 管理员账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" lay-verify="userName" autocomplete="off" placeholder="管理员账号" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"> 管理员密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="userPwd" lay-verify="userPwd" autocomplete="off" placeholder="管理员密码"  class="layui-input"
                            id='userPwd'>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> 重复密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="verifyPwd" lay-verify="verifyPwd" autocomplete="off" placeholder="重复密码"  class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="installSql" data-type="loading">立即安装</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <script src="/libs/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/libs/jquery/jquery.min.js" type="text/javascript"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form,
                layer = layui.layer,
                element = layui.element;
            //自定义验证规则
            form.verify({
                sqlAddress: function (value) {
                    if (!value) {
                        return '请输入数据服务器地址！';
                    }
                },
                sqlUser: function (value) {
                    if (!value) {
                        return '请输入数据库用户名！'
                    }
                },
                sqlPwd: function (value) {
                    if (!value) {
                        return '请输入数据库密码！'
                    }
                },
                companyName: function (value) {
                    if (!value) {
                        return '请输入公司名称！'
                    }
                },
                userName: function (value) {
                    if (!value) {
                        return '请输入管理员账号！'
                    }
                },
                userPwd: [/(.+){6,12}$/, '密码必须6到12位!'],
                content: function (value) {
                    layedit.sync(editIndex);
                },
                verifyPwd: function (value) {
                    if ($("#userPwd").val() != value) {
                        return '俩次输入密码不一致，请重新输入！'
                    }
                },
            });
            //监听提交
            form.on('submit(installSql)', function (data) {
                layer.msg('安装中', {
                    icon: 16,
                    shade: 0.01,
                    time: 2000000, //20s后自动关闭
                });
                var formData = data.field;
                $.post('/install', formData, function (res) {
                    if (res.status != 200) {
                        layer.open({
                            title: '警告',
                            content: res.msg,
                            icon: 2,
                            skin: 'layer-ext-moon'
                        });
                        return;
                    }
                    layer.open({
                            title: '信息',
                            content: '安装完成，即将跳转登录界面',
                            icon: 1,
                            skin: 'layer-ext-moon'
                        });

                    window.location.href='/login'
                })
                return false;
            });
        });
    </script>
</body>

</html>